<template>
	<div class="myFooter">
		<div class="footer">
			<div @click="play" class="Head">
				<img :src="this.$store.state.songpic" />
			</div>
			<div @click="play" class="Elder">
				<p>{{this.$store.state.songtitle}}</p>
				<p>{{this.$store.state.songautro}}</p>
			</div>
			<div class="pause" @click="swtich"><img :src="Img" /></div>
			<div class="next-song" @click="nextsong" >
				<img src="src/images/next.png" />
			</div>
		</div>

	</div>
</template>

<script>
	import jsonp from "jsonp";
	import img from "./img";
	import musicPlay from "../components/musicPlay.vue";
	export default {
		name: "myFooter",
		data() {
			return {
				Img: "src/images/stop.png",
				curIndex: this.$store.state.songids,
			}
		},
		methods: {
			swtich() {
				var music = document.querySelector(".audi");
				if(music.paused) {
					music.play();
				} else {
					music.pause();
				};
				this.Img = this.Img == "src/images/stop.png" ? "src/images/play.png" : "src/images/stop.png";
			},
			play() {
				this.$router.push("/play");
			},
			nextsong() {
				var next = parseInt(this.curIndex + 1);
				var lilengs = this.$store.state.sontlieng;
				var song = this.$store.state.song;
				console.log(this.$store.state.songList);
				var playId = this.$store.state.songList[next].song_id;
				console.log(next);
				jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting/?method=baidu.ting.song.play&songid=" + playId, null, (err, res) => {
					if(err) {

					} else {
						this.$store.commit("changeSong", res.bitrate.file_link);
						this.$store.commit("changeSongname", res.songinfo.title);
						this.$store.commit("changeSongautro", res.songinfo.author);
						this.$store.commit("changeSongpic", res.songinfo.pic_small);
						this.$store.commit("changeSongpicbig", res.songinfo.pic_small);
					}
				})
				this.curIndex = next;
			}
		},
		components: {},
		computed: {},
		created() {}
	}
</script>

<style scoped lang="scss">
	@import "../scss/utils.scss";
	.myFooter {
		width: 100%;
		height: 10%;
		background: linear-gradient(to top, #9d28b1, #af259e, #c21c60);
		bottom: 0;
		left: 0;
		z-index: 999;
		.footer {
			width: 100%;
			height: 100%;
			background: #000000;
			position: relative;
			>div {
				display: inline-block;
				overflow: hidden;
				@include middle;
			}
			div:first-child {
				width: 11%;
				height: 63%;
				left: 3.3%;
				img {
					height: 100%;
				}
			}
			div:nth-child(2) {
				left: 19.7%;
				p:first-child {
					font-size: 14px;
				}
				p:last-child {
					font-size: 10px;
					color: #8e8b8e;
				}
			}
			div:nth-child(3) {
				right: 18.1%;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				border: 1px solid #827f83;
				@include amg;
				img {
					width: 30%;
				}
			}
			div:last-child {
				right: 4.6%;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				border: 1px solid #827f83;
				@include amg;
				img {
					width: 30%;
				}
			}
		}
	}
</style>